<template>
	<view class="work-container">
		<!-- 轮播图 -->
		<uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
			<swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
				<swiper-item v-for="(item, index) in data" :key="index">
					<view class="swiper-item" @click="clickBannerItem(item)">
						<image :src="item.image" mode="aspectFill" :draggable="false" />
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		
		<uni-section title="经典案例" type="line">
			<uni-card :title="title" :thumbnail="uri" @click="">
				<text class="uni-body">{{memo}}</text>
			</uni-card>
		</uni-section>
		
		<uni-section title="功能" type="line"></uni-section>
		<view class="grid-body">
			<uni-grid :column="4" :showBorder="false" @change="changeGrid">
				
				<uni-grid-item>
					<view class="grid-item-box" @click="goProject()">
						<uni-icons type="star-filled" size="30" color="#ffca28"></uni-icons>
						<text class="text">项目内容</text>
					</view>
				</uni-grid-item>
				
				<uni-grid-item>
					<view class="grid-item-box" @click="goDaily()">
						<uni-icons type="camera-filled" size="30" color="#7cd1c9"></uni-icons>
						<text class="text">日常内容</text>
					</view>
				</uni-grid-item>
				
				<uni-grid-item>
					<view class="grid-item-box" @click="goSummary()">
						<uni-icons type="bars" size="30" color="#057ed6"></uni-icons>
						<text class="text">总结内容</text>
					</view>
				</uni-grid-item>
		
				<uni-grid-item>
					<view class="grid-item-box" @click="goCase()">
						<uni-icons type="medal-filled" size="30" color="#f15325"></uni-icons>
						<text class="text">相关案例</text>
					</view>
				</uni-grid-item>
				
				
				<!-- <uni-grid-item>
						<view class="grid-item-box" @click="neironghuizong()">
							<uni-icons type="staff-filled" size="30"></uni-icons>
							<text class="text">课程列表</text>
						</view>
				</uni-grid-item>
				
				<uni-grid-item>
					<view class="grid-item-box" @click="neirongshanggbao1()">
						<uni-icons type="settings-filled" size="30"></uni-icons>
						<text class="text">课程案例</text>
					</view>
				</uni-grid-item>
				
				<uni-grid-item>
					<view class="grid-item-box">
						<uni-icons type="bars" size="30"></uni-icons>
						<text class="text">课程总结</text>
					</view>
				</uni-grid-item> -->
				
			</uni-grid>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				swiperDotIndex: 0,
				data: [{
						image: ''
					},
					{
						image: ''
					},
					{
						image: ''
					}
				],
				token: '',
				title: '',
				memo: '',
				uri: ''
			}
		},
		methods: {
			goDaily(){
				uni.navigateTo({
				            //保留当前页面，跳转到应用内的某个页面
				            url: '/pages/work/dailyAll'
				        })
			},
			
			goSummary(){
				uni.navigateTo({
					url:'/pages/work/summaryAll'
				})
			},
			goCase(){
				uni.navigateTo({
					url:'/pages/work/caseAll'
				})
			},
			goProject(){
				uni.navigateTo({
				            //保留当前页面，跳转到应用内的某个页面
				            url: '/pages/work/projectAll'
				        })
			},
			neirongshanggbao1(){
				uni.navigateTo({
				            //保留当前页面，跳转到应用内的某个页面
				            url: '/pages/els/content/content3'
				        })
			},
			neironghuizong1() {
				uni.navigateTo({
				            //保留当前页面，跳转到应用内的某个页面
				            url: '/pages/els/content/content2'
				        })
			},
			
			neironghuizong() {
				uni.navigateTo({
				            //保留当前页面，跳转到应用内的某个页面
				            url: '/pages/els/content/content'
				        })
			},
			clickBannerItem(item) {
				console.info(item)
			},
			changeSwiper(e) {
				this.current = e.detail.current
			},
			changeGrid(e) {
				
			},
			onShow() {
				var _this = this;
				uni.getStorage({
					key: 'App-Token',
					success(res) {
						_this.token = res.data;
					}
				})
				setTimeout(() => {
					uni.request({
						url: 'http://xg.kystu.cn:8085/system/recommend/list',
						method: 'GET',
						header: {
							'Authorization': "Bearer " + _this.token
						},
						success: (res) => {
							if (res.data.code == 200) {
								console.log(res.data.rows[0].title)
								_this.title = res.data.rows[0].title;
								_this.memo = res.data.rows[0].memo;
								_this.uri = 'http://xg.kystu.cn:8085' + res.data.rows[0].upimage;
							}

						}
					})
					uni.request({
						url: 'http://xg.kystu.cn:8085/system/carousel/list',
						method: 'GET',
						header: {
							'Authorization': "Bearer " + _this.token
						},
						success: (res) => {
							if (res.data.code == 200) {
								var baseUri = 'http://xg.kystu.cn:8085';
								console.log(res.data.rows[0].imgUrl)
								for (var i = 0; i < res.data.total; i++) {
									console.log(res.data.total)
									_this.data[i].image = baseUri + res.data.rows[i].imgUrl;
								}
							}
							if (res.data.code == 401) {
								var _this_ = this;
								uni.getStorage({
									key: 'App-Token',
									success(res) {
										_this_.token = res.data;
									}
								})
								uni.request({
									url: 'http://xg.kystu.cn:8085/system/carousel/list',
									method: 'GET',
									header: {
										'Authorization': "Bearer " + _this_.token
									},
									success: (res) => {
										if (res.data.code == 200) {
											var baseUri = 'http://xg.kystu.cn:8085';
											console.log(res.data.rows[0].imgUrl)
											for (var i = 0; i < res.data.total; i++) {
												console.log(res.data.total)
												_this_.data[i].image = baseUri + res.data
													.rows[i]
													.imgUrl;
											}
										}
									}
								})

							}
						}
					})

				}, 500)
			}

		}
	}
</script>

<style lang="scss">
	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 14px;
		line-height: inherit;
	}

	/* #endif */

	.text {
		text-align: center;
		font-size: 26rpx;
		margin-top: 10rpx;
	}

	.grid-item-box {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
		;
	}

	.swiper {
		height: 300rpx;
	}

	.swiper-box {
		height: 150px;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
		height: 300rpx;
		line-height: 300rpx;
	}

	@media screen and (min-width: 500px) {
		.uni-swiper-dot-box {
			width: 400px;
			/* #ifndef APP-NVUE */
			margin: 0 auto;
			/* #endif */
			margin-top: 8px;
		}

		.image {
			width: 100%;
		}
	}
</style>
